<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 匹配第一元素，必须是li */
        /* li:first-child{
            color:red;
        }
        li:last-child{
            color:blue;
        } */

        /* 匹配第三元素，必须是li */
        /* li:nth-child(3){
            background-color: aqua;
        } */

        /* 2n/even 偶数  2,4,6,8*/
        /* 2n+1/odd 奇数  1,3,5,7*/
        /* li:nth-child(2n+1){
            background-color: aqua;
        } */

        /* 匹配倒数第二元素，必须是li  */
        /* li:nth-last-child(2){
            background-color:red;
        } */

        /* 匹配第一个li的元素(不看其他标签，只看li) */
        /* li:first-of-type{
            color:red;
        }
        li:last-of-type{
            color:blue;
        } */

        /* 匹配第三个li的元素(不看其他标签，只看li) */
        /* 2n/even 偶数  2,4,6,8*/
        /* 2n+1/odd 奇数  1,3,5,7*/

        /* li:nth-of-type(3){
            background-color: aqua;
        } */

        /* 匹配倒数第二个li的元素(不看其他标签，只看li)  */
         li:nth-last-of-type(2){
            background-color:red;
        }
    </style>
</head>
<body>
   <ul>
    <p>2222</p>
    <li>111</li>
    <p>333</p>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <p>222</p>
   </ul>
</body>
</html>